<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item :label="queryTime.label">
        <el-date-picker :type="queryTime.type" v-model="queryParams.date" :value-format="queryTime.format"
          @change="queryData" />
      </el-form-item>
    </el-form>
    <div ref="chart" style="width: 90vw;height: 45vh;"></div>
  </div>
</template>
<script>
  import {
    MultipleValueChart
  } from '@/views/components/chart'
  import {
    FreeCalendarChart,
    valueFormat
  } from './components/CalendarChart'
  export default {
    name: 'TypeCalendarChart',
    mixins: [MultipleValueChart, FreeCalendarChart],
    data() {
      const vm = this
      return {
        valueFormat,
        chartOption: {
          title: {
            text: vm.$t('chart.TypeDeviceUseAnalysis'),
            left: 'center'
          },
          tooltip: {
            show: true,
          },
          xAxis: [{
            type: 'category'
          }],
          yAxis: [{
            type: 'value',
            show: true
          }]
        },
        queryParams: {
          groupDate: 2,
        },
        groupKeys: ['type'],
        valueKeys: ['onlinePercent'],
      }
    },
    created() {},
    mounted() {},
    methods: {}
  }

</script>
